"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import Link from "next/link"

interface SearchAlbumsGridProps {
    query: string
    limit?: number
    showHeader?: boolean
}

export function SearchAlbumsGrid({ query, limit = 12, showHeader = false }: SearchAlbumsGridProps) {
    const [albums, setAlbums] = useState<any[]>([])
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            try {
                setIsLoading(true)
                // 这里应该是真实的API调用，这里用模拟数据

                // 模拟数据
                if (query) {
                    setTimeout(() => {
                        const mockAlbums = Array(limit)
                            .fill(0)
                            .map((_, i) => ({
                                id: `album-${i}`,
                                title: `${query}专辑${i + 1}`,
                                artist: query,
                                releaseYear: 2020 + Math.floor(Math.random() * 4),
                                image: "/placeholder.svg?height=200&width=200",
                            }))
                        setAlbums(mockAlbums)
                        setIsLoading(false)
                    }, 500)
                } else {
                    setAlbums([])
                    setIsLoading(false)
                }
            } catch (error) {
                console.error("Error fetching albums:", error)
                setIsLoading(false)
            }
        }

        fetchData()
    }, [query, limit])

    if (isLoading || albums.length === 0) return null

    return (
        <div className="mb-8">
            {showHeader && (
                <div className="flex justify-between items-center mb-4">
                    <h2 className="text-xl font-bold">专辑</h2>
                    <Link href={`/search?q=${encodeURIComponent(query)}&tab=albums`} className="text-sm text-primary">
                        查看全部
                    </Link>
                </div>
            )}

            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                {albums.map((album) => (
                    <Link key={album.id} href={`/album/${album.id}`} className="group">
                        <div className="aspect-square overflow-hidden rounded-lg relative">
                            <Image
                                src={album.image || "/placeholder.svg"}
                                alt={album.title}
                                fill
                                className="object-cover transition-transform group-hover:scale-105"
                            />
                        </div>
                        <div className="mt-2">
                            <h3 className="text-sm font-medium line-clamp-2">{album.title}</h3>
                            <p className="text-xs text-muted-foreground mt-1">
                                {album.artist} · {album.releaseYear}
                            </p>
                        </div>
                    </Link>
                ))}
            </div>
        </div>
    )
}

